<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="分区">
            <el-select v-model="searchForm.type" placeholder="请选择分区">
              <el-option
                class="custom_select"
                v-for="(oVal, oIdx) of typeList"
                :key="oIdx"
                v-bind="oVal"
              >
                <span>{{ oVal.label }}</span>
                <div>
                  <i
                    class="el-icon-edit-outline"
                    @click.stop="editTalentType(oVal)"></i>
                  <i class="el-icon-delete" @click.stop="delTalentTypeById(oVal.value)"></i>
                </div>
              </el-option>
            </el-select>
            <el-tooltip class="tool_add" content="新增分区">
              <i class="el-icon-circle-plus-outline" @click="showAddType = true" />
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div>
      </template>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="id" />
        <el-table-column prop="user_typeText" label="达人分区" />
        <el-table-column prop="name" label="达人姓名" align="center" />
        <el-table-column prop="avatar_url" label="达人头像" align="center">
          <template slot-scope="{ row }">
            <el-image
              style="width: 120px; height: auto"
              :src="row.avatar_url"
              :preview-src-list="[row.avatar_url]"
              />
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center"/>
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="{ row }">
            {{ row.sex=='1'?'男':'女' }}
          </template>
        </el-table-column>
        <el-table-column prop="phoneText" label="达人手机号" align="center"/>
        <el-table-column prop="like_num" label="点赞数" align="center"/>
        <el-table-column prop="subdistrict_name" label="所在小区" align="center"/>
        <el-table-column prop="tags" label="达人标签" align="center"/>
        <el-table-column label="操作" width="240px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="editDetail(row)"
              >编辑达人</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="delTalentById(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="查看达人详情"
      :visible.sync="showAddOrDetail"
      width="1400px"
      @closed="resetForm()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item  class="span-2" label="达人姓名" prop="name">
          <el-input readonly
            v-model="builingForm.name"
            placeholder="请输入达人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="达人年龄" prop="age">
          <el-input
            v-model="builingForm.age"
            placeholder="请输入达人年龄"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="达人手机号" prop="phone">
          <el-input
            v-model="builingForm.phone"
            placeholder="请输入达人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="所在小区" prop="subdistrict_id">
          <el-select v-model="builingForm.subdistrict_id" placeholder="请选择达人分类">
            <el-option
              v-for="(oVal, oIdx) of communityList"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="span-2"
          label="达人分类"
          prop="subdistrict"
        >
          <el-select v-model="builingForm.types">
            <el-option
              v-for="(oVal, oIdx) of typeList"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="option_item"
          :label="oIdx ? '' : '达人标签'"
          v-for="(oVal, oIdx) of builingForm.vote_options"
          :key="oIdx"
          :rules="{
            required: true,
            message: '选项不能为空',
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="oVal.name"
            placeholder="请输入选项内容"
            @change="oVal.isEdit = oVal.id"
          />
          <span class="ipt_tool" >
            <i class="el-icon-plus" @click="addOption" />
          </span>
          <span class="ipt_tool" v-if="oIdx!=0">
            <i class="el-icon-delete" @click="removeOption(oIdx)" />
          </span>
        </el-form-item>
        <el-form-item label="达人头像" prop="avatar_url">
          <Upload
            v-model="builingForm.avatar_url"
            :file.sync="builingForm.avatar_url"
          />
        </el-form-item>
        <el-form-item label="达人简介" prop="summary">
          <el-input
            v-model="builingForm.summary"
            type="textarea"
            row="6"
            placeholder="请输入达人简介"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="addTalent()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="新增达人"
      :visible.sync="showAddOrEdit"
      width="1400px"
      @closed="resetForm()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item  class="span-2" label="达人姓名" prop="name">
          <el-input
            v-model="builingForm.name"
            placeholder="请输入达人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="达人年龄" prop="age">
          <el-input
            v-model="builingForm.age"
            placeholder="请输入达人年龄"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="达人手机号" prop="phone">
          <el-input
            v-model="builingForm.phone"
            placeholder="请输入达人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="span-2"
          label="所在小区"
          prop="subdistrict"
        >
          <el-select v-model="builingForm.subdistrict_id">
            <el-option
              v-for="(oVal, oIdx) of communityList"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="span-2"
          label="达人分类"
          prop="subdistrict"
        >
          <el-select v-model="builingForm.types">
            <el-option
              v-for="(oVal, oIdx) of typeList"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="option_item"
          :label="oIdx ? '' : '达人标签'"
          v-for="(oVal, oIdx) of builingForm.vote_options"
          :key="oIdx"
          :rules="{
            required: true,
            message: '选项不能为空',
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="oVal.name"
            placeholder="请输入选项内容"
            @change="oVal.isEdit = oVal.id"
          />
          <span class="ipt_tool" >
            <i class="el-icon-plus" @click="addOption" />
          </span>
          <span class="ipt_tool" v-if="oIdx!=0">
            <i class="el-icon-delete" @click="removeOption(oIdx)" />
          </span>
        </el-form-item>
        <el-form-item label="达人头像" prop="avatar_url">
          <Upload
            v-model="builingForm.avatar_url"
            :file.sync="builingForm.avatar_url"
          />
        </el-form-item>

        <el-form-item label="达人简介" prop="summary">
          <el-input
            v-model="builingForm.summary"
            type="textarea"
            row="6"
            placeholder="请输入达人简介"
          ></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="addTalent()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="达人分类"
      :visible.sync="showAddType"
      width="800px"
      @closed="resetForm()"
    >
      <el-form
        :model="typeForm"
        ref="typeForm"
        label-width="6em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item  label="分类名称" prop="name">
          <el-input
            v-model="typeForm.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="addTalentType()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit, status } from "@/utils/mixins";
import Upload from "@/components/Upload/SingleImage.vue";
import Preview from "@/components/Preview.vue";
import _ from "lodash";

export default {
  mixins: [table, addOrEdit, status],
  components: {
    Upload,
    Preview,
  },
  data: () => ({
    showAddType:false,
    showAddOrEdit:false,
    showAddOrDetail:false,
    isLoading: true,
    tableData:[],
    communityList:[],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      type:'',//达人分类
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },
    builingForm: {
      $id:"",
      name:'',
      age:"",
      avatar_url:"",
      phone:"",
      summary:'',
      user_tagText:'',
      subdistrict_id:'',
      types:"",
      vote_options:[{
        name:"请输入达人标签"
      }],
      tags:""
    },
    typeForm:{
      $id:"",
      name:''
    },
    typeList: [],
  }),

  created() {
    API.getCommunityList().then(({data})=>{
      this.communityList=data.items.map(item=>{
        return {value:item.id,label:item.name}
      })
    })
    this.getTalentTypeList()
    this.getList()
  },

  methods: {
    // 获取达人分类列表
    getTalentTypeList(){
      API.getTalentTypeList()
      .then(({data}) => {
        let type=data.map(item=>{
          return {label:item.name,value:item.id}
        })
        this.typeList=type
        this.searchForm.type=this.typeList[0].value
        this.builingForm.types=this.typeList[0].value

      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 查看列表
    getList(){
      this.isLoading=true
      API.getTalentList(this.searchForm)
        .then(({data}) => {
          data.items.forEach(item=>{
            item.phoneText=item.phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
            if(item.user_type.length){
              item.user_typeText=item.user_type[0].name
            }
          })
          this.tableData=data.items
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 查看详情
    editDetail(obj){
      let tagArray=obj.tags.split(",")
      tagArray=tagArray.map(item=>{
        return {
          name:item
        }
      })
      this.builingForm.vote_options=tagArray
      this.builingForm.$id=obj.id
      this.builingForm.name=obj.name,
      this.builingForm.age=obj.age,
      this.builingForm.avatar_url=obj.avatar_url,
      this.builingForm.phone=obj.phone,
      this.builingForm.summary=obj.summary,
      this.builingForm.subdistrict_id=obj.subdistrict_id
      // this.builingForm.types=obj.user_type[0].id
      this.showAddOrDetail=true
    },

    // 删除达人
    delTalentById(id){
      let _that=this
      this.$confirm(`是否删除改条数据？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delTalent(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 新增达人
    addTalent(){
      if(!this.builingForm.name.trim()) return this.$message.error("名称不可为空~~");
      if(!this.builingForm.age) return this.$message.error("年龄不可为空~~")
      if(!this.builingForm.phone.trim()) return this.$message.error("手机号不可为空~~")
      if(!this.builingForm.subdistrict_id) return this.$message.error("请选择小区~~")
      if(!this.builingForm.types) return this.$message.error("请选择达人分类~~")
      if(this.builingForm.vote_options.length==1&&this.builingForm.vote_options[0].name=='请输入达人标签'){
        return this.$message.error("请正确填写达人分类~~")
      }
      if(!this.builingForm.avatar_url.trim()) return this.$message.error("头像不可为空~~")
      if(!this.builingForm.summary.trim()) return this.$message.error("描述不可为空~~")

      let data={
        name:this.builingForm.name,
        age:this.builingForm.age,
        avatar_url:this.builingForm.avatar_url,
        phone:this.builingForm.phone,
        summary:this.builingForm.summary,
        subdistrict_id:this.builingForm.subdistrict_id,
        types:this.builingForm.types,
        tags:this.builingForm.vote_options.map(item=>{
          return item.name
        }).join(",")
      }


      if(this.builingForm.$id){
        let id=this.builingForm.$id
        API.editTalent(id,data)
          .then(({data}) => {
            this.$message.success("新增成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getList()
          })
      }else{
         API.addTalent(data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getList()
          })
      }
    },

    // 标签选项
    addOption() {
      this.builingForm.vote_options.push({
        name: "",
      });
    },

    // 移除投票项
    removeOption(index) {
      this.builingForm.vote_options.splice(index, 1);
    },

    // 新增达人分类
    addTalentType(){
      if(!this.typeForm.name.trim()) return this.$message.error("名称不可为空~~");
      let data={
        name:this.typeForm.name,
      }
      if(this.typeForm.$id){
        let id=this.typeForm.$id
        API.editTalentType(id,data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getTalentTypeList()
          })
      }else{
         API.addTalentType(data)
          .then(({data}) => {
            this.$message.success("新增成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getTalentTypeList()
          })
      }
    },

    // 编辑达人分类
    editTalentType(obj){
      this.typeForm.$id=obj.value
      this.typeForm.name=obj.label
      this.showAddType=true
    },

    // 删除达人分类
    delTalentTypeById(id){
      let _that=this
      this.$confirm(`是否删除该分类？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.deleteTalentType(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getTalentTypeList()
        })
      })
      .catch(() => {
      });
    },

    resetForm(){
      this.builingForm.$id=""
      this.builingForm.name=''
      this.builingForm.age=""
      this.builingForm.avatar_url=""
      this.builingForm.phone=""
      this.builingForm.summary=''
      this.typeForm.$id=''
      this.typeForm.name=''
      this.builingForm.subdistrict_id=1
      this.showAddOrEdit=false
      this.showAddOrDetail=false
      this.showAddType=false
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  .tool_add {
    font-size: 20px;
    margin-left: 10px;
    transform: translateY(10%);
  }
}
.option_item {
  .ipt_tool {
    margin-left: 16px;
  }
}
::v-deep {
    .el-switch{
      transform:translateY(6px)
    }
    .el-message-box{
      min-width:400px;
    }
    .el-dialog{
      margin-top:2vh !important;
    }
    .el-input .el-input__inner{
      border-radius:4px !important;
    }
    .el-message-box__message{
      position: absolute !important;
      top:50% !important;
      left:40px !important;
    }
    .el-form-item__label{
      font-size:16px !important;
    }
    .el-input{
      width:90% !important;
    }
  }
</style>
